import React, { useState } from "react";
import "./TodoHeader.css";
export default function TodoHeader(props) {
  let { addtodo } = props; //解构 props 父组件传下来的数据
  let [value, stevalue] = useState(""); //将input 框变为受控组件  设置状态
  let getdata = function (e) {
    // 获取设置 value 值
    // console.log(e.target.value);
    stevalue(e.target.value);
  };

  let adddata = (e) => {
    //添加操作 按 enter 键进行添加事件
    // console.log(e.keyCode);
    if (e.keyCode === 13 && value.length !== 0) {
      // console.log(value);
      addtodo(value);
      stevalue("");
    }
  };
  return (
    <>
      <div className="todo-header">
        <input
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
          value={value}
          onChange={getdata}
          onKeyUp={adddata}
        />
      </div>
    </>
  );
}
